<template>
	<rx-dialog @ok="handleSubmit" @cancel="cancel">
		<rx-layout>
            <template #middle>
                <rx-grid :data="data" :columns="columns" :showPage="true"></rx-grid>
			</template>
		</rx-layout>
	</rx-dialog>
</template>

<script>
import ScreenDataModelApi from "@/api/screen/core/screen-data-model";
import {Util,RxLayout,RxDialog,RxGrid} from "@lowcode/jpaas-base-lib";

export default {
	name: "DataPreviewDialog",
	props:{
		config:{
			type:Object
		},
		callback: {
			type: Function
		},
		destroy: {
			type: Function
		}
	},
	components:{
		RxLayout,
		RxDialog,
		RxGrid
	},
	data() {
		return {
			data:[],
            columns: [],
		}
	},
	created(){
		this.getData();
	},
	methods:{
		getData(){
			if(!this.config){
				return;
			}
			ScreenDataModelApi.dataPreview(this.config).then(res=>{
				if(res.data){
					this.data=res.data;
					this.getColumns(res);
				}
			})
		},
		getColumns(res){
			for (let i = 0; i < res.dimensions.length; i++) {
				let dimension=res.dimensions[i];
				this.columns.push({
					title: dimension.fieldLabel,
                    field: dimension.tableName+"_"+dimension.fieldName
				})
			}
			for (let i = 0; i < res.measures.length; i++) {
				let measure=res.measures[i];
				this.columns.push({
					title: measure.fieldLabel,
                    field: measure.tableName+"_"+measure.fieldName
				})
			}
		},
		handleSubmit() {
			Util.closeWindow(this, "ok");
		},
		cancel() {
			Util.closeWindow(this, "cancel");
		},
	}
}
</script>

<style scoped>

</style>
